<template>
	<div class="flex">
		<h3>订单信息</h3>
		<!-- 我的订单-菜单价格明细begin -->
		<div class="child_flex price_Hight" v-for="(item, index) in yl" :key="index">
			<strong>{{ item.ylName }}</strong>
			<div class="right_text">￥&ensp;<span>**</span></div>
		</div>

		<!-- 我的订单-菜单价格明细end -->

		<!-- 我的订单-总计begin -->
		<div class="child_flex">
			<div class="left_img">
				<img src="@/assets/images/加.png" alt="" />
			</div>
			<strong class="total_price_Strong">总计</strong>
			<div class="total_price_Money">￥<span>**.**</span></div>
		</div>
		<!-- 我的订单-总计end -->
	</div>
</template>

<script>
export default {
	name: 'ConfirmOrderInformation',
	props: {
		// 菜谱食材数据
		yl: {
			require: true,
		},
	},
};
</script>

<style scoped>
.flex {
	display: flex;
	flex-direction: column;
	height: auto;
	margin: 23px 26px 12px 26px;
	padding: 15px 20px 16px 22px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
	border-radius: 12px;
}
.flex > h3 {
	height: 25px;
	color: #3c454b;
	font-family: Noto Sans SC;
	font-size: 20px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: 0.25714290142059326px;
	text-align: left;
	flex: 1;
}
/* 我的订单-信息begin */
.child_flex {
	display: flex;
	height: auto;
	margin-top: 15px;
}

.child_flex > strong {
	height: 36px;
	color: #3c454b;
	font-family: Noto Sans SC;
	font-size: 12px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0px;
	text-align: left;
	flex: 1;
}

.left_img > img {
	width: 15.73px;
	height: 20px;
	top: 171px;
	left: 43px;
	box-sizing: border-box;
	border-radius: 2px;
	vertical-align: middle;
	margin-right: 10px;
}

.right_text {
	display: inline-block;
	width: 69px;
	color: rgb(110, 124, 135);
	font-family: Noto Sans SC;
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	text-align: right;
	/* 换行 */
	word-break: break-all;
}
.border_botom {
	border-bottom: 1px solid rgb(229, 237, 242);
	margin-bottom: 15px;
}

.price_Hight > strong {
	height: 0;
}
/* 我的订单-信息end */

/* 我的订单-总计begin */
.child_flex > .total_price_Strong {
	color: rgb(60, 69, 75);
	font-family: Noto Sans SC;
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 1.0666667222976685px;
	text-align: left;
	text-transform: uppercase;
}
.total_price_Money {
	color: rgb(250, 94, 105);
	font-family: Montserrat;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: right;
}
/* 我的订单-总计end */
</style>
